<template>
	<view class="index">
		<div class="title">
			<div class="name">
				<image src="/static/icon_hospital.png"></image>{{hospitalNames}}
			</div>
			<div class="time">{{time}}</div>
		</div>
		<div class="swiper" >
			<swiper autoplay circular interval="3000" duration="500">

				<swiper-item>
					<image src="/static/banner.png"></image>
				</swiper-item>
			</swiper>
		</div>
		<div class="details">
			<home v-if="status == 'home'"></home>
			<menuList v-if="status == 'menuList'"></menuList>
			<qrCodePay v-if="status == 'qrCodePay'"></qrCodePay>
			<healthCardRegistration v-if="status == 'healthCardRegistration'"></healthCardRegistration>
			<onlinePayment v-if="status == 'onlinePayment'"></onlinePayment>
			<reportDetails v-if="status == 'reportDetails'"></reportDetails>
			<hospitalIntroduction v-if="status == 'hospitalIntroduction'"></hospitalIntroduction>
			<articleList v-if="status == 'articleList'"></articleList>
			<articleDetail v-if="status == 'articleDetail'"></articleDetail>
			<caseSearch v-if="status == 'caseSearch'"></caseSearch>
			<inspectionReport v-if="status == 'inspectionReport'"></inspectionReport>
			<appointmentRegistration v-if="status == 'appointmentRegistration'"></appointmentRegistration>
        </div>

	</view>
</template>

<script lang="ts">
	import { uiCollection } from '../../Providing/uiCollection';
	import home from '@/pages/home/home.vue';
	import menuList from '@/pages/menuList/menuList.vue';
	import qrCodePay from '@/pages/qrCodePay/qrCodePay.vue'
	import appointmentRegistration from '@/pages/appointmentRegistration/appointmentRegistration.vue'
	import healthCardRegistration from '@/pages/healthCardRegistration/healthCardRegistration.vue'
	import onlinePayment from '@/pages/onlinePayment/onlinePayment.vue'
	import reportDetails from '@/pages/reportDetails/reportDetails.vue'
	import hospitalIntroduction from '@/pages/hospitalIntroduction/hospitalIntroduction.vue'
	import articleList from '@/pages/articleList/articleList.vue'
	import articleDetail from '@/pages/articleDetail/articleDetail.vue'
	import caseSearch from '@/pages/caseSearch/caseSearch.vue'
	import inspectionReport from '@/pages/inspectionReport/inspectionReport.vue'
	import { globalVariable } from '../../globalVariable/globalVariable';
	export default {
		components: {
			menuList,
			home,
			qrCodePay,
			appointmentRegistration,
			healthCardRegistration,
			onlinePayment,
			reportDetails,
			hospitalIntroduction,
			articleList,
			articleDetail,
			caseSearch,
			inspectionReport,
		},
		data() {
			return {
				hospitalNames: "永胜妇幼保健医院",
				time: "",
				status: "menuList"
			}
		},
		onLoad() {

		},
		methods: {
			clear() {
				console.log("进入首页，重置globalVariable缓存变量");
				//以下内容为操作设备后写入，回到HOME页会先执行清空数据操作
				globalVariable.articleListId = "";
				globalVariable.articleDetailId = "";
				//读卡返回信息，注册接口需要使用
				globalVariable.peopleName = "";
				globalVariable.sex = "";
				globalVariable.people = "";
				globalVariable.birthDay = "";
				globalVariable.addr = "";
				globalVariable.iDCard = "";
				globalVariable.inspectionReportId = "";
				globalVariable.reportDetailsId = "";
				//登录返回信息，后续操作会使用
				globalVariable.realName = "";
				globalVariable.brid = "";
				globalVariable.cardId = '';//就诊卡ID，

				//支付二维码信息
				globalVariable.qrCodePay = {
					url: "",//支付二维码内容
					type: "",//支付类型，挂号或缴费
					amount: "",//支付金额
					payId: "" //挂号缴费查询订单需要使用
				};
			}

		},
		created() {
			let _this = this;
			let updateTime = setInterval(() => {
				// console.log("进入页面，启动计时器");
				_this.time = uiCollection.getDate();
			}, 1000)

			// uni.$once('healthCardRegistration', () => {
			// 	console.log('收到切换路由信息，关闭计时器')
			// 	// clearInterval(updateTime);
			// 	// this.status = 'healthCardRegistration'
			// })

			uni.$on('goToHome', () => {
				this.status = 'menuList'
				this.clear();
			});
			uni.$on('goToMenuList', () => {
				this.status = "menuList";
			});
			uni.$on('goToQrCodePay', () => {
				this.status = "qrCodePay";
			});
			uni.$on('goToAppointmentRegistration', () => {
				this.status = "appointmentRegistration";
			});
			uni.$on('goToHealthCardRegistration', () => {
				this.status = "healthCardRegistration";
			});
			uni.$on('goToOnlinePayment', () => {
				this.status = "onlinePayment";
			});
			uni.$on('goTocaseSearch', () => {
				this.status = "caseSearch";
			});
			uni.$on('goToHospitalIntroduction', () => {
				this.status = "hospitalIntroduction";
			});
			uni.$on('goToArticleDetail', () => {
				this.status = "articleDetail";
			});
			uni.$on('goToArticleList', () => {
				this.status = "articleList";
			});
			uni.$on('goToInspectionReport', () => {
				this.status = "inspectionReport";
			});
			uni.$on('goToReportDetails', () => {
				this.status = "reportDetails";
			});

		},
	}
</script>

<style lang="scss">
	.index {
		padding-top: 30px;

		.title {
			width: 100%;
			height: 50px;
			display: flex;
			margin: auto;
			letter-spacing: 0px;

			.name {
				flex: 1;
				display: flex;
				line-height: 50px;
				font-size: 20px;

				image {
					width: 50px;
					height: 50px;
				}
			}

			.time {
				flex: 1;
				line-height: 50px;
				font-size: 20px;
				text-align: right;
				padding-right: 30px;
			}
		}

		.swiper {
			height: 400px;

			uni-swiper {
				height: 400px !important;
			}

			image {
				width: 100%;
				height: 100%;
			}

		}

		.details {
			height: 800px;
		}
	}
</style>
